<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>学习</title>
</head>

<body>
  <canvas id="c2d" class="c2d" width="1000" height="500"></canvas>
  <script type="module">
    import * as THREE from 'https://threejs.org/build/three.module.js'
    import { OrbitControls } from 'https://threejsfundamentals.org/threejs/resources/threejs/r132/examples/jsm/controls/OrbitControls.js'

    const canvas = document.querySelector('#c2d')
    // 渲染器
    const renderer = new THREE.WebGLRenderer({ canvas })

    const fov = 40 // 视野范围
    const aspect = 2 // 相机默认值 画布的宽高比
    const near = 0.1 // 近平面
    const far = 1000 // 远平面
    // 透视投影相机
    const camera = new THREE.PerspectiveCamera(fov, aspect, near, fov)
    camera.position.set(0, 10, 20)
    camera.lookAt(0, 0, 0)

    // 控制相机
    const controls = new OrbitControls(camera, canvas)
    controls.update()

    // 场景
    const scene = new THREE.Scene()
    scene.background = new THREE.Color('white')

    {
      // 灯光
      const color = 0xffffff
      const intensity = 1
      // 方向光
      const light = new THREE.DirectionalLight(color, intensity)
      scene.add(light)
    }

    // 球
    const radius = 1
    const widthSegments = 36
    const heightSegments = 36
    const sphereGeometry = new THREE.SphereGeometry(radius, widthSegments, heightSegments)

    // 立方体
    const boxWidth = 6
    const boxHeight = 6
    const boxDepth = 6
    const boxGeometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth)

    // 材质
    const material = new THREE.MeshPhongMaterial({ color: 0x00ff00 })
    {
      // 添加全局坐标位置
      const axes1 = new THREE.AxesHelper()
      scene.add(axes1)

      // 网格1
      const mesh1 = new THREE.Mesh(sphereGeometry, material)
      // 相对坐标 x 移动5
      mesh1.position.x = 5
      // 全局坐标 移动
      scene.add(mesh1)

      // 创建组
      const group = new THREE.Group()
      group.position.x = -5
      // 旋转
      group.rotation.x = 1
      // 全局坐标 移动
      scene.add(group)

      // 添加局部坐标系位置
      const axes2 = new THREE.AxesHelper()
      group.add(axes2)

      // 网格2
      const mesh2 = new THREE.Mesh(sphereGeometry, material)
      // 相对坐标 y 移动5
      mesh2.position.y = 5

      // 网格3
      const mesh3 = new THREE.Mesh(boxGeometry, material)
      // 相对坐标 y 移动5
      mesh3.position.y = -5
      // 组 局部坐标移动
      group.add(mesh2)
      group.add(mesh3)
    }

    // 渲染
    function render() {
      renderer.render(scene, camera)
      requestAnimationFrame(render)
    }

    requestAnimationFrame(render)
  </script>
</body>

</html>